<template>
	<view class="page">
		<u-navbar :safeAreaInsetTop="true" :bgColor="theme_color" :leftIconColor="theme_color">
			<view slot="center">
				<view style="text-align: center;letter-spacing: 2px;font-weight: bolder;color: white;">青泓商城</view>
			</view>
		</u-navbar>
		<view :style="'margin-top:' + navH + 'px;'" class="padding10">
			<view>
				<u-search :showAction="false" placeholder="搜索商品" :animation="true" shape="round" :disabled="true"
					@click="toSearch" bgColor="#ffffff"></u-search>
			</view>
		</view>
		<view style="border-radius: 12px;height: 180px;margin:0px 10px;">
			<u-swiper :list="list1" height="180" keyName="ad_code" @click="adClick" imgMode="aspectFit"></u-swiper>
		</view>

		<view class="padding10">
			<u-notice-bar :text="text1" direction="column" bgColor="#ffffff"></u-notice-bar>
		</view>

		<!-- 金刚区 -->
		<view class="padding10 bg-white" style="margin: 0 10px;">
			<u-grid col="4">
				<u-grid-item v-for="(item, index) in swiperList1" :key="index">
					<navigator :url="item.url" style="flex-direction: column;align-items: center;margin-bottom: 10px;"
						class="acea-row">
						<image :src="item.img" style="width: 50px;height: 50px;" class="animated zoomIn"></image>
						<view style="padding-top: 5px;" class="fs-12 color333">{{item.name}}</view>
					</navigator>
				</u-grid-item>
			</u-grid>
		</view>

		<view style="padding: 0 10px;border-radius: 8px;margin-top: 10px;">
			<view style="border-radius: 8px;padding:10px;" class="bg-white">
				<view class="padding10 acea-row row-middle row-between">
					<view class="fw-bolder color333">精品套餐 (会员专区)</view>
					<view class="fs-14 fw-bolder" @click="toSearch">更多 ></view>
				</view>
				<scroll-view scroll-x="true" style="white-space: nowrap;" class="flex">
					<view v-for="(item,index) in bestList" :key="index" @click="toDetail(item.goods_id)"
						style="border-radius: 8px;width: 130px;max-height: 200px;background-color: #ffffff;margin: 10px;display: inline-block;box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1);">
						<u-image :src="item.goods_thumb" width="130px" height="120px" mode="aspectFit"
							radius="8"></u-image>
						<view style="padding: 5px;height: 80px;">
							<view class="line1 fs-14 fw-bolder">{{item.goods_name}}</view>
							<view style="color: #E9382A;padding-top: 5px;">￥{{item.shop_price}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view style="padding:0 10px;border-radius: 8px;margin-top: 10px;">
			<view style="border-radius: 8px;padding:0 10px;" class="bg-white">
				<view class="padding10 acea-row row-middle row-between">
					<view class="fw-bolder color333">新品推荐</view>
					<view class="fs-14 fw-bolder" @click="toSearch">更多 ></view>
				</view>
				<scroll-view scroll-x="true" style="white-space: nowrap;" class="flex">
					<view v-for="(item,index) in newsList" :key="index" @click="toDetail(item.goods_id)"
						style="border-radius: 8px;width: 130px;max-height: 200px;background-color: #ffffff;margin: 10px;display: inline-block;box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1);">
						<u-image :src="item.goods_thumb" width="130px" height="120px" mode="aspectFit"
							radius="8"></u-image>
						<view style="padding: 5px;height: 80px;">
							<view class="line1 fs-14 fw-bolder">{{item.goods_name}}</view>
							<view style="color: #E9382A;padding-top: 5px;">￥{{item.shop_price}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="fw-bolder" style="padding: 10px 20px;margin-top: 10px;color: white;">热销商品</view>

		<view class="padding10" style="margin: 0 10px;background-color: #F8F8F8;">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view>
					<u-grid :border="false" col="2">
						<u-grid-item v-for="(item,index) in hotList" :key="index">
							<view class="bg-white" @click="toDetail(item.goods_id)"
								style="border-radius: 8px;width: 90%;height: 200px;margin-bottom: 10px;background-color: #ffffff;border: 1px solid #F8F8F8;box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1);">
								<u-image :src="item.goods_thumb" width="100%" height="120px" mode="aspectFit"
									radius="8"></u-image>
								<view style="padding: 5px;">
									<view class="line1 fs-14 fw-bolder">{{item.goods_name}}</view>
									<view style="color: orangered;padding-top: 5px;">￥{{item.shop_price}}</view>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</mescroll-body>
		</view>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		BASE_URL
	} from "@/config/app";
	import {
		toLogin
	} from "@/libs/login";
	import {
		mapGetters
	} from "vuex";
	import {
		search_goods,
		shop_ad_list,
		shop_info_head,
		article_list
	} from '@/api/store.js'
	import {
		userInfo
	} from '@/api/user';
	import {
		recommend
	} from '@/api/public.js';
	const common = require('@/mixins/common');
	var options = {};
	common(options);
	export default {
		mixins: [{
			methods: options
		}, MescrollMixin],
		computed: mapGetters(["isLogin", "app_token"]),
		data() {
			return {
				theme_color: getApp().globalData.theme_color,
				img_url: BASE_URL,
				navH: '',
				list1: [],
				swiperList1: [
					{
						img: BASE_URL + '/statics/yilangmp/qinghong/health.png',
						name: '健康之家',
						url: '/pages/goods/goods_list/index'
					},
					{
						img: BASE_URL + '/statics/yilangmp/qinghong/form.png',
						name: '视频论坛',
						url: '/pages/form/index'
					},
					{
						img: BASE_URL + '/statics/yilangmp/qinghong/sign.png',
						name: '每日签到',
						url: '/pages/users/user_sign/index'
					},
					{
						img: BASE_URL + '/statics/yilangmp/qinghong/integral.png',
						name: '积分商城',
						url: '/pages/users/user_integral/integral_shop/index'
					},
					{
						img: BASE_URL + '/statics/yilangmp/qinghong/hot.png',
						name: '我的名片',
						url: '/pages/cards/my_cards/index'
					},
					{
						img: BASE_URL + '/statics/yilangmp/qinghong/shop.png',
						name: '线下门店',
						url: '/pages/artificial_intelligence/index'
					},
					{
						img: BASE_URL + '/statics/yilangmp/qinghong/news.png',
						name: '新闻热点',
						url: '/pages/news/index'
					},
					{
						img: BASE_URL + '/statics/yilangmp/qinghong/best.png',
						name: '助农优选',
						url: '/pages/goods/goods_list/index'
					}
				],
				hotList: [],
				newsList: [],
				bestList: [],
				shop_info: {},
				userInfo: {},

				text1: []
			}
		},
		onLoad() {
			this.navH = getApp().globalData.navHeight / 2 - 5;
			var that = this

			if (this.isLogin) {
				userInfo({
					app_token: that.app_token,
					supplier_id: getApp().globalData.supplier_id
				}).then(res => {
					that.userInfo = res.data
					uni.$u.mpShare = {
						title: '三宝物联小程序',
						path: 'pages/index/index?rid=' + res.data.user_id,
						imageUrl: ''
					}
				});
			}

			that.getShopInfo()

			search_goods({
				cat_id: '',
				supplier_id: getApp().globalData.supplier_id,
				goods_name: '',
				order: '',
				sort: '',
				page: 1,
				brand_id: '',
				is_sbest: 1, //精 品 0否1是
				is_shot: 0, //热卖 0否1是
				is_snew: 0, //新品 0否1是
				area: '',
				lng: '',
				lat: '',
				goods_nature: 0 //1普通商品 2 景点
			}).then((res) => {
				that.bestList = res.data;
			})

			search_goods({
				cat_id: '',
				supplier_id: getApp().globalData.supplier_id,
				goods_name: '',
				order: '',
				sort: '',
				page: 1,
				brand_id: '',
				is_sbest: 0, //精 品 0否1是
				is_shot: 0, //热卖 0否1是
				is_snew: 1, //新品 0否1是
				area: '',
				lng: '',
				lat: '',
				goods_nature: 0 //1普通商品 2 景点
			}).then((res) => {
				that.newsList = res.data;
			})

			shop_ad_list({
				supplier_id: getApp().globalData.supplier_id,
				position_id: 0
			}).then(res => {
				this.list1 = res.data
			})
			
			article_list({
				supplier_id:getApp().globalData.supplier_id,
				page:1,
			}).then(res=>{
				if(res.data.length){
					for (var i = 0; i < res.data.length; i++) {
						this.text1.push(res.data[i].title) 
					}
				}
			})
		},
		methods: {
			getShopInfo() {
				var that = this;
				shop_info_head({
					supplier_id: getApp().globalData.supplier_id
				}).then(res => {
					if (res.status != -1) {
						that.shop_info = res.data
					}
				})
			},
			// #ifdef MP-WEIXIN
			// 小程序分享
			onShareAppMessage: function(options) {
				var path = ''
				if (this.isLogin) {
					path = '/pages/index/index?rid=' + this.userInfo.user_id;
				} else {
					path = '/pages/index/index';
				}

				let title = this.shop_info.supplier_name || ''
				return {
					title: title,
					path: path,
					imageUrl: '',
					success: function(res) {},
					fail: function() {},
				};
				return shareObj;
			},

			// 分享到朋友圈
			onShareTimeline(res) {
				var path = ''
				if (this.isLogin) {
					path = '/pages/index/index?rid=' + this.userInfo.user_id;
				} else {
					path = '/pages/index/index';
				}
				let title = this.shop_info.supplier_name || ''
				return {
					title: title,
					path: path,
					imageUrl: '',
					success: function(res) {},
					fail: function() {},
				}
			},
			// #endif
			adClick(index) {
				uni.navigateTo({
					url: '/pages/goods/detail/index?goods_id=' + this.list1[index].ad_link
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/goods/detail/index?goods_id=' + id
				})
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/index'
				})
			},
			upCallback(page) {
				var that = this;
				search_goods({
					cat_id: '',
					supplier_id: getApp().globalData.supplier_id,
					goods_name: '',
					order: '',
					sort: '',
					is_sbest: 0, //精 品 0否1是
					is_shot: 1, //热卖 0否1是
					is_snew: 0, //新品 0否1是
					page: page.num,
					brand_id: '',
				}).then(async (res) => {

					this.mescroll.endSuccess(res.data.length);

					//设置列表数据
					if (page.num == 1) this.hotList = []; //如果是第一页需手动制空列表
					this.hotList = this.hotList.concat(res.data); //追加新数据

				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: $theme-color;
	}
</style>